<template>
  <view class="pages">
    <u-sticky   bgColor='#fff'>
        <view class="followTop">
          <view class="uSearch">
            <view class="searchBox">
              <u-search searchIcon="plus" searchIconSize="26rpx" maxlength="6" placeholder="添加屏蔽词" :showAction="keyword?true:false" v-model.trim="keyword"
                @search="search"  @custom="search" bgColor="#F5F6F8" :clearabled="false" @change="change" @focus="focus" actionText="添加" :focus="focu"
                 :actionStyle="{
                    color: '#00C1B9',
                    fontSize: '26rpx',
                    lineHeight: '37rpx',
                    marginRight: '35rpx',
                  }"></u-search>
            </view>
          </view>
        </view>
      </u-sticky>
      <view class="content">
        <view class="prop mar-b-20">{{`已设置屏蔽词（${tagList.length}/10）`}}</view>
        <view class="tag">
          <view class="tagItem u-flex mar-b-20" v-for="(item,index) in tagList" :key="index">
            <text class="itemName mar-r-16">{{item.word}}</text>
             <u-icon
              name="close"
              color="#AAAAAA"
              size="15"
              @click="deleTag(item,index)"
            ></u-icon>
          </view>

        </view>

         <view v-if="tagList.length == 0" class="flex-column-row-start">
            <image src="https://ossresource.miyingbl.com/def/243d3202405231405385619.png" style="width:240rpx;height:200rpx;margin-top:243rpx;margin-bottom:20rpx"></image>
            <view class="empty_text mar-b-10">暂无数据</view>
            <view class="empty_text u-p-t-10">包含屏蔽词的评论和弹幕不会在直播间出现</view>
          </view>
      </view>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { maskWordList, maskWordAddApi, maskWordDeldApi } from '@/api/social'
import { onLoad } from '@dcloudio/uni-app'
import { useMemberStore, useSystemStore } from '@/stores'
const userStore = useMemberStore()
const token = userStore?.token
const userInfo = ref(userStore?.userInfo)
const doctorUserId=ref(userStore?.userInfo?.uid)
console.log(doctorUserId.value)
const keyword = ref('')
const focu = ref(false)
const tagList = ref([])
const search = () => {
  if (tagList.value.length < 10) {
    if (tagList.value.findIndex((item) => item.word == keyword.value) == -1) {
      updateMaskWord()
    } else {
      return uni.showToast({
        title: '请勿重复添加',
        icon: 'none',
      })
    }
  } else {
    uni.showToast({ title: '最多可添加10个屏蔽词', icon: 'none' })
  }
}
const change = () => { }
const focus = () => { }

const deleTag = async (item: any, index: number) => {
  let res = await maskWordDeldApi({ ids: item.id,doctor_user_id:doctorUserId.value })
  if (res.code == 200) {
    getMaskWordList()
  }
  uni.showToast({ title: res.msg, icon: 'none' })
}
async function getMaskWordList() {
  const res = await maskWordList({doctor_user_id:doctorUserId.value})
  tagList.value = res.data.list
}
async function updateMaskWord() {
  let res = await maskWordAddApi({
    word: keyword.value,
    doctor_user_id:doctorUserId.value
  })

  keyword.value = ''
  getMaskWordList()
  uni.showToast({ title: res.msg, icon: 'none' })
  // 1=修改医院名称2=修改科室名称3=修改职称4=修改头像5=修改擅长6=修改标签
}
onLoad(() => {
  getMaskWordList()
})
// onReady(()=>{

// })
</script>


<style lang="scss" scoped>
.pages{
  background: #F6F6F6;
  height: 100vh;
}
.followTop {
  background: #fff
}
.uSearch {
  padding: 10rpx 24rpx 10rpx;
  width: 100%;
  display: flex;
  align-items: center;

  .searchBox {
    flex: 1;
    background: #F5F6F8;
    border-radius: 35rpx;
  }
}
.content{
  padding:20rpx 24rpx;
  .prop{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #5C5C5C;
  }
}
.tag{
  display: flex;
  flex-wrap: wrap;
}
.tagItem{
  background: #FFFFFF;
  border-radius: 34rpx;
  padding: 10rpx 20rpx;
  min-width: 100rpx;
  margin-right: 20rpx;
  .itemName{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #202020;
  }
}
.empty_text{
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #AAAAAA;
}
</style>
